<template>
	<view style="margin: 50rpx;">
		<image class="smallHeaderPortrait" style="display: inline-block;" :src="post.headPortrait"></image>
		<text style="font-size: smaller;padding-left: 30rpx;display: inline-block;">{{post.username}}</text>
		<text style="font-size: smaller;padding-left: 30rpx;display: inline-block;">{{post.postTime}}</text>
		<view style="height: 50rpx;"></view>
		<view>
			<text>{{post.postTitle}}</text>
			<image v-if="!post.isFocused" style="width: 60rpx;height: 60rpx;margin-left: 500rpx;" @click="focus()" src="/static/focus.png"></image>
			<image v-if="post.isFocused" style="width: 60rpx;height: 60rpx;margin-left: 500rpx;" @click="cencelFocus(post.focusId)"
			 src="/static/hadFocus.png"></image>
		</view>
		<view v-for="(postImg,index) in post.postImgList" :key="index">
			<image :src="postImg"></image>

		</view>

		<view>{{post.postContent}}</view>
		<view style="height: 50rpx;"></view>
		<view class="clickCount">
			<image v-if="!post.isThumbs" style="width: 40rpx;height: 40rpx;" @click="updateThumbs(post.postId,1)" src="/static/thumbs.png"></image>
			<image v-if="post.isThumbs" style="width: 40rpx;height: 40rpx;" @click="updateThumbs(post.postId,0)" src="/static/had-thumbs.png"></image>
			{{post.postClick}}
		</view>
		<view style="height: 50rpx;"></view>
		<view v-if="post.postCommentForShowList.length>0">评论：</view>
		<view style="height: 20rpx;"></view>
		<view v-for="(postCommentForShow,index) in post.postCommentForShowList" :key="index">
			<view style="font-size: smaller;">{{postCommentForShow.commentContent}}</view>
			<view style="font-size:x-small;margin-left: 400rpx;">{{postCommentForShow.commentUsername}}</view>
			<view style="font-size:x-small;margin-left: 450rpx;">{{postCommentForShow.commentTimeJson}}</view>
		</view>
		<view style="position: fixed;left: 0rpx;bottom: 0rpx;" class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" v-model="comment" placeholder="发表评论"></input>
			<button class="cu-btn bg-green shadow" @click="sendComment">发送</button>
		</view>
	</view>
</template>

<script>
	import base from '@/common/base.js'
	let toast = msg => {
		uni.showToast({
			title: msg,
			icon: 'none',
		});
	}
	export default {
		data() {
			return {
				comment: "",
				post: [],
				postId: 0,
				isClick: false,
				InputBottom: 0,
				coachId: 0,
			}
		},
		onLoad(option) {
			this.postId = option.postId;
			this.getPost(option.postId);
		},
		methods: {//输入操作
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			cencelFocus(focusId) {
				uni.request({
					url: base.urlPrefix + "yoga_app/focus/coachCancelFocus",
					data: {
						focusId: focusId
					},
					success: (res) => {
						if (res.data == "success") {
							this.post.isFocused = false;
							uni.showToast({
								icon:'none',
								title:'已取消关注'
							})
						}
					}
				})
			},
			getPost(postId) {
				if (base.coach != null) {
					this.coachId = base.coach.coachId;
				}
				uni.request({
					url: base.urlPrefix + 'yoga_app/post/coachGetPostDetailByPostId',
					data: {
						postId: postId,
						coachId: this.coachId
					},
					success: (res) => {
						this.post = res.data.object;
					}
				})
			},
			updateThumbs(postId, flag) {
				if (base.coach != null) {
					if (flag == 1) {
						this.post.postClick++;
						this.post.isThumbs = true;
					} else {
						this.post.postClick--;
						this.post.isThumbs = false;
					}
					uni.request({
						url: base.urlPrefix + 'yoga_app/thumbs-up/coachUpdateThumbs',
						data: {
							postId: postId,
							coachId: base.coach.coachId,
							postClick: this.post.postClick,
							flag: Number(flag)
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					});
				}
			},
			sendComment() {
				if (base.coach != null) {
					if (this.comment.trim().length != 0) {
						uni.request({
							url: base.urlPrefix + 'yoga_app/post-comment/saveCoachPostComment',
							data: {
								postId: this.post.postId,
								comment: this.comment,
								coachId: base.coach.coachId
							},
							success: (res) => {
								toast(res.data.message);
								this.comment = "";
								this.getPost(this.postId);
							}
						});
					} else {
						uni.showToast({
							title: '评论内容不能为空',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					});
				}
			},
			focus() {
				if (base.coach != null) {
					uni.request({
						url: base.urlPrefix + 'yoga_app/focus/saveCoachFocus',
						data: {
							postId: this.post.postId,
							coachId: this.coachId
						},
						success: (res) => {
							this.post.isFocused = true;
							toast(res.data.message);
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					});
				}
			}
		}
	}
</script>

<style>
	.smallHeaderPortrait {
		width: 40rpx;
		height: 40rpx;
		border-radius: 60rpx;
		margin-left: 5%;
		background: #ffffff;
	}

	.clickCount {
		margin-left: 80%;
	}

	.bottom {
		margin-bottom: 0rpx;
	}

	.btn-bottom {
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}
</style>
